<template>
	<view>
		<van-toast id="van-toast"></van-toast>
		<van-dialog id="van-dialog"></van-dialog>
		<van-cell-group>
		  <van-field
		    :value="loginTel"
		    placeholder="请输入手机号"
		    :border="false"
				type="number"
				maxlength="11"
		    @change="changeLoginTel"
		  />
		</van-cell-group>
		<van-cell-group>
		  <van-field
		    :value="loginPassword"
		    placeholder="请输入密码"
				type="password"
		    :border="false"
		    @change="changeLoginPassword"
				use-button-slot
		  >
			<van-button slot="button" size="small" type="primary">忘记密码</van-button>
			</van-field>
		</van-cell-group>
		<view class="button-area">
			<van-checkbox :value="checked" @change="changeCheckState">同意买买买用户协议、用户隐私政策</van-checkbox>
			<van-button type="danger" round block @click="getUserInfo">登录</van-button>
		</view>
		<text class="register" @click="gotoRegisterPage">没有账号?去注册</text>
		<!-- 用户当前输入的手机号未找到，询问用户是否注册 -->
		<van-dialog
		  use-slot
		  title="未查询到用户,是否注册"
		  :show="showRegisterDialog"
			@cancel="cancelRegister"
			@confirm="registerNewUser"
			@close="reset"
		  show-cancel-button
		>
		<van-field
		  :value="userName"
		  placeholder="请确认用户名"
		  :border="false"
		  @change="changeUserName"
		/>
		  <van-field
		    :value="confirmLoginPassword"
		    placeholder="请确认输入密码"
		  	type="password"
		    :border="false"
		    @change="changeConfirmLoginPassword"
		  />
		</van-dialog>
	</view>
</template>

<script>
import Toast from '../../wxcomponents/vant-weapp/toast/toast'
	export default {
		data() {
			return {
				// 用户的登录名
				loginTel: '',
				// 用户的登陆密码
				loginPassword: '',
				// 确认用户的密码
				confirmLoginPassword: '',
				// 用户名
				userName: '',
				// 单选框的选中状态
				checked: false,
				// 是否展示注册用户的弹出框
				showRegisterDialog: false
			}
		},
		methods: {
			// 当登录名输入框内容发生改变时触发
			changeLoginTel(e) {
				this.loginTel = e.detail
			},
			// 当密码输入框内容发生改变时触发
			changeLoginPassword(e) {
				this.loginPassword = e.detail
			},
			// 当确认用户密码输入框发生变化时触发
			changeConfirmLoginPassword(e) {
				this.confirmLoginPassword = e.detail
			},
			changeUserName(e) {
				this.userName = e.detail
			},
			// 获取用户信息
			async getUserInfo() {
				if(!this.checked) return Toast.fail('请勾选用户协议')
				if(this.loginTel.trim() === '' || this.loginPassword.trim() === '') return
				if(!Number(this.loginTel)) return Toast.fail('检查手机号格式')
				const { data: res } = await uni.$http.post('/user/login', { tel: this.loginTel, pwd: this.loginPassword })
				if(res.meta.status === 201) {
					this.showRegisterDialog = true
					return
				}
				if(res.meta.status !== 200)	return Toast.fail(res.meta.message)
				uni.setStorageSync('uid', res.recordset[0].usersid)
				uni.setStorageSync('uname', res.recordset[0].usersname)
				uni.setStorageSync('history', JSON.stringify([]))
				uni.setStorageSync('shistory', JSON.stringify([]))
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			// 单选框按钮发生改变时触发
			changeCheckState(e) {
				this.checked = !this.checked
			},
			// 前往注册页面
			gotoRegisterPage() {
				uni.navigateTo({
					url: '/subpages/userregister/userregister'
				})
			},
			// 取消注册用户
			cancelRegister() {
				console.log('取消注册')
			},
			// 注册用户
			async registerNewUser() {
				if(!this.userName.trim()) return Toast.fail('请输入用户名')
				if(this.confirmLoginPassword !== this.loginPassword) return Toast.fail('两次密码不一致')
				const { data: res } = await uni.$http.post('/user/register', { name: this.userName, pwd: this.loginPassword, tel: this.loginTel })
				console.log(res)
			},
			// dialog弹窗关闭时触发
			reset() {
				this.showRegisterDialog = false
				this.userName = ''
				this.confirmLoginPassword = ''
			}
		}
	}
</script>

<style>
	.van-field__input {
		height: 50px!important;
	}
	
	.button-area {
		width: 80%;
		height: 100px;
		margin: 20px auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.register {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		color: skyblue;
	}
</style>
